<template>
    <sky-card>
        <view class="header-box">
            <view>订单信息</view>
        </view>
        <view class="address-row">
            <view class="label">订单编号：</view>
            <view class="value">{{ orderInfo.order_no }}</view>
        </view>
        <view class="address-row" >
            <view class="label">下单时间：</view>
            <view class="value">{{ orderInfo.createtime_text }}</view>
        </view>
        <view class="address-row" v-if="orderInfo.status!=OrderStatusEnum.pendingPayment.value">
            <view class="label">付款金额：</view>
            <view class="value">￥{{ orderInfo.order_money }}</view>
        </view>
        <view class="address-row" v-if="orderInfo.status!=OrderStatusEnum.pendingPayment.value">
            <view class="label">支付方式：</view>
            <view class="value">{{ orderInfo.pay_type_text }}</view>
        </view>
        <view class="address-row" v-if="orderInfo.status!=OrderStatusEnum.pendingPayment.value">
            <view class="label">支付时间：</view>
            <view class="value">{{ orderInfo.pay_time_text }}</view>
        </view>
        <view class="address-row" v-if="orderInfo.delivery_time">
            <view class="label">发货时间：</view>
            <view class="value">{{ orderInfo.delivery_time_text }}</view>
        </view>
        <view class="address-row" v-if="orderInfo.receiving_time">
            <view class="label">收货时间：</view>
            <view class="value">{{ orderInfo.receiving_time_text }}</view>
        </view>
    </sky-card>
</template>
<script setup>
import {OrderStatusEnum} from '@/enums/order'

const props = defineProps({
    orderInfo: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

</script>
<style scoped lang="scss">
.header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid #eeeeee;
    padding-bottom: 12rpx;
    margin-bottom: 24rpx;
    font-weight: bold;
}

.address-row {
    display: flex;
    align-items: flex-start;
    gap: 4rpx;
    margin-bottom: 18rpx;
    
    .label {
        color: #606266;
    }
    
    .value {
        flex: 1;
    }
}
</style>
